<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import { getDepartmentAllAPI } from '@/apis/department';
import type { DepartItem } from '@/types/department';
import { computed, ref } from 'vue';

// 定义父亲数组用于接收后端返回全部数据
const departList = ref<DepartItem[]>([])
// 当前索引控制高亮
const activeIndex = ref(0)
const getDepartment = async ()=>{
  const res = await getDepartmentAllAPI()
  departList.value = res.data
  // console.log(res);
  // console.log(departList.value);
}
getDepartment()
// 二级科室数据 注意一定要加问号 因为刚开始一级科室还没有请求回来
const activeDepartChild = computed(()=>{
  return departList.value[activeIndex.value]?.child
})
// 3. 参数传递
const props = defineProps<{
  type: string
  illnessType: string
}>()
</script>

<template>
  <view class="department-page">
    <!-- 一级科室 -->
    <scroll-view scroll-y class="department-primary">
      <view v-for="(item,index) in departList" :key="item.id" 
      class="department-item "
      :class="{active:activeIndex===index}"
      @click="activeIndex=index"
      >{{item.name}}</view>
    </scroll-view>
    <!-- 二级科室 -->
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="`/subpkg_consult/pages/description/description?depId=${item.id}&type=${props.type}&illnessType=${props.illnessType}`"
        class="department-item"
        v-for="(item,index) in activeDepartChild"
        :key="item.id"
        >
        {{item.name}}
      </navigator>

    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>